<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <link rel="stylesheet" href="../reset.css">
  <title>顾客点餐页面</title>
  <style>
    body{
      background-image: url("../img/bj.png");
      background-size: cover;
      text-align: center;
    }
    #admin{
      width: 220px;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      background: #3f3f3f;
    }
    .left img{
      width: 80%;
      display: block;
      margin: 50px auto;
    }
    .left li{
      font-size: 16px;
      color: #fff;
      line-height: 60px;
      padding-left: 30px;
      border-bottom: 1px solid #2b2b2b;
      cursor: pointer;
    }
    .icon{
      background: white;
      justify-content: center;
      flex-direction: column;
    }


  </style>
</head>
<body>
<div id="app">
    <el-header>
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="前菜" name="first">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in qiancaiArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="刺身" name="second">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in cishenArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="沙拉" name="third">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in shalaArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="炸物" name="fourth">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in zhawuArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="菜品" name="fifth">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in caipinArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="锅物" name="sixth">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in guowuArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="定食" name="seventh">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in dingshiArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="寿司" name="eighth">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in shousiArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="酒水" name="ninth">
            <el-main>
              <el-row gutter="20">
                <el-col span="6" v-for="p in jiushuiArr" style="margin: 10px 0">
                  <el-card>
                    <img :src="p.url" width="100%" height="233px">
                    <p style="font-size: 14px;height: 30px">{{p.title}}</p>
                    <p>
                      <b>￥{{p.price}}</b>
                      <span style="float: right"></span>
                    </p>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-header>
  </el-container>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        activeName: 'second',
        qiancaiArr:[{title:"芥末章鱼",price:10,url:"menu/芥末章鱼.png"},
          {title:"芥末海螺片",price:12,url:"menu/芥末海螺片.png"},
          {title:"麻辣鲜蛤",price:12,url:"menu/麻辣鲜蛤.png"},
          {title:"泡菜",price:10,url:"menu/泡菜.png"},
          {title:"中华海草",price:12,url:"menu/中华海草.png"},],
        zhawuArr:[{title:"芥末虾球",price:38,url:"menu/芥末虾球.png"},
          {title:"唐扬鸡块",price:38,url:"menu/唐扬鸡块.png"},
          {title:"唐扬鸡软骨",price:38,url:"menu/唐扬鸡软骨.png"},
          {title:"天妇罗时蔬",price:18,url:"menu/天妇罗时蔬.png"},
          {title:"天妇罗炸虾",price:38,url:"menu/天妇罗炸虾..png"},
          {title:"章鱼丸子",price:28,url:"menu/章鱼丸子.png"},],
        tianpinArr:[{title:"抹茶冰激凌曲奇",price:18,url:"menu/抹茶冰激凌曲奇.png"},
          {title:"气球布丁",price:18,url:"menu/气球布丁.png"},
          {title:"水信玄饼",price:18,url:"menu/水信玄饼.png"},
          {title:"樱花大福",price:18,url:"menu/樱花大福.png"},],
        shousiArr:[{title:"北极贝手握",price:12,url:"menu/北极贝手握.png"},
          {title:"大西洋鲑鱼卷",price:48,url:"menu/大西洋鲑鱼卷.png"},
          {title:"金枪鱼手握",price:12,url:"menu/金枪鱼手握.png"},
          {title:"军舰手握",price:28,url:"menu/军舰拼盘.png"},
          {title:"榴莲忘返",price:58,url:"menu/榴莲忘返.png"},
          {title:"鳗鱼手握",price:22,url:"menu/鳗鱼手握.png"},
          {title:"美式多层寿司蛋糕",price:68,url:"menu/美式多层寿司蛋糕.png"},
          {title:"热带雨林卷",price:48,url:"menu/热带雨林卷.png"},
          {title:"三文鱼手握",price:15,url:"menu/三文鱼手握.png"},
          {title:"甜虾手握",price:15,url:"menu/甜虾手握.png"},],
        shalaArr:[{title:"北极贝沙拉",price:38,url:"menu/北极贝沙拉.png"},
          {title:"龙虾沙拉",price:48,url:"menu/龙虾沙拉.png"},
          {title:"土豆沙拉",price:28,url:"menu/土豆沙拉.png"},
          {title:"烟熏三文鱼牛油果沙拉",price:48,url:"menu/烟熏三文鱼牛油果沙拉.png"},],
        jiushuiArr:[{title:"朝日啤酒",price:20,url:"menu/朝日啤酒.png"},
          {title:"朝日扎啤",price:20,url:"menu/朝日扎啤.png"},
          {title:"男山",price:388,url:"menu/男山.png"},
          {title:"麒麟一番榨",price:20,url:"menu/麒麟一番榨.png"},
          {title:"日本盛",price:288,url:"menu/日本盛.png"},
          {title:"三井寿清酒",price:668,url:"menu/三井寿清酒.png"},
          {title:"松竹梅",price:188,url:"menu/松竹梅.png"},
          {title:"獭祭23",price:1888,url:"menu/獭祭23.png"},
          {title:"獭祭39",price:1488,url:"menu/獭祭39.png"},
          {title:"獭祭45",price:998,url:"menu/獭祭45.png"},],
        guowuArr:[{title:"石狩锅",price:118,url:"menu/石狩锅.png"},
          {title:"寿喜烧",price:88,url:"menu/寿喜烧.png"},],
        dingshiArr:[{title:"地狱拉面",price:38,url:"menu/地狱拉面.png"},
          {title:"鳗鱼饭",price:88,url:"menu/鳗鱼饭.png"},
          {title:"亲子丼",price:38,url:"menu/亲子丼.png"},
          {title:"日式炒饭",price:28,url:"menu/日式炒饭.png"},
          {title:"天妇罗乌冬面",price:48,url:"menu/天妇罗乌冬面.png"},
          {title:"豚骨拉面",price:38,url:"menu/豚骨拉面.png"},
          {title:"豚骨乌冬",price:38,url:"menu/豚骨乌冬.png"},
          {title:"温泉玉子丼",price:38,url:"menu/温泉玉子丼.png"},],
        cishenArr:[{title:"北极贝",price:58,url:"menu/北极贝.png"},
          {title:"刺身大拼",price:288,url:"menu/刺身大拼.png"},
          {title:"刺身小拼",price:118,url:"menu/刺身小拼.png"},
          {title:"鲷鱼",price:48,url:"menu/鲷鱼.png"},
          {title:"金枪鱼刺身",price:58,url:"menu/金枪鱼刺身.png"},
          {title:"牡丹虾",price:68,url:"menu/牡丹虾.png"},
          {title:"热灼刺青花",price:38,url:"menu/热灼刺青花.png"},
          {title:"三文鱼",price:58,url:"menu/三文鱼.png"},
          {title:"甜虾",price:58,url:"menu/甜虾.png"},
          {title:"紫海胆",price:88,url:"menu/紫海胆.png"},],
        caipinArr:[
        {title:"海鲜味增汤",price:28,url:"menu/海鲜味增汤.png"},
        {title:"鳗鱼白烧",price:118,url:"menu/鳗鱼白烧.png"},
        {title:"明太子烤土豆",price:28,url:"menu/明太子烤土豆.png"},
        {title:"泡菜梅花肉",price:58,url:"menu/泡菜梅花肉.png"},
        {title:"蒲烧鳗鱼",price:128,url:"menu/蒲烧鳗鱼.png"},
        {title:"铁板牛舌",price:68,url:"menu/铁板牛舌.png"},
        {title:"温泉蛋章鱼大阪烧",price:58,url:"menu/温泉蛋章鱼大阪烧.png"}
          ]
      }
    },
   methods:{
     handleClick(tab, event) {
       console.log(tab, event);
     }
   }
  })
</script>
</html>